<template>
  <div id="app">
    <div class="row">
<!--      <leon-button>444</leon-button>
      <leon-button type="primary"  disabled @click="fn">444</leon-button>
      <leon-button type="success"  disabled >444</leon-button>
      <leon-button type="info" plain disabled  >444</leon-button>
      <leon-button type="primary" round icon="leon-icon-delete">444</leon-button>
      <leon-button type="success" round icon="leon-icon-course">444</leon-button>
      <leon-button type="info" plain round icon="leon-icon-delete">444</leon-button>
      <leon-button type="info" circle icon="leon-icon-delete"></leon-button>-->
<!--      <leon-dialog title="温习提示"></leon-dialog>-->
<!-- sync 修饰符来代替close    @close="fnClose" -->
<!--      <leon-dialog width="60%" top="200px" :visible.sync="visible" >
        <template v-slot:title><h3>我是标题</h3></template>
        111
        <template v-slot:footer>
          <leon-button @click="visible=false">取消</leon-button>
          <leon-button type="primary" @click="visible=false">确定</leon-button>
        </template>
      </leon-dialog>
      <leon-button type="primary" @click="visible=true">确定</leon-button>-->
<!--      <leon-input placeholder="请输入应缓慢" type="password" name="username" disabled></leon-input>
&lt;!&ndash;    v-model等价于value和input  如value ='username' @input='username=$username=$event.target.value'&ndash;&gt;
      <leon-input placeholder="请输入数字"  v-model="username" clearable></leon-input>
      <leon-input placeholder="请输入数字"  v-model="username" ></leon-input>
      <leon-input placeholder="请输入数字"  v-model="username" type="password" show-password></leon-input>-->
<!--      <div :value="active" @input="active=$event.target.value">{{ active }}</div>-->
      <leon-switch v-model="active"></leon-switch>
      <leon-switch v-model="active" active-color="red" inactive-color="green"></leon-switch>
<!--      <leon-switch :value="active" @input="input" active-color="red" inactive-color="green"></leon-switch>-->
    </div>

<!--    <lable-input v-on:focus="onFocus" label="基础组件" v-on:mouseover="listerFunMore"></lable-input>-->
<!--    <form-select></form-select>-->
    <element-select></element-select>
  </div>
</template>
<script>
export default {
  name: "App",
  data(){
    return{
      visible:true,
      username:'zs',
      active:false
    }
  },
  created() {

  },
  methods:{
    fn(e){
      console.log(e)
    },
    fnClose(bl){
      this.visible = bl
    },
    input(val){
      this.active = val
    },
    onFocus(){
      console.log(56666);
    },
    listerFunMore(){
      console.log('listerFunMore');
    }
  }
}
</script>


<style scoped lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
::v-deep.leon-input{width: 290px}
.aa-enter{
  opacity: 0;
}
.aa-enter-to{
  opacity: 1;
}
.aa-enter-active{
  transition: all .5s;
}
.aa-leave{
  opacity: 1;
}
.aa-leave-to{
  opacity: 0;
}
.aa-leave-active{
  transition: all .5s;
}
//或者用动画过渡
.aa-enter-active{
  animation: run 0.5s;
}
.aa-leave-active{
  animation: run 0.5s reverse;
}
@keyframes run {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.row{
  margin-bottom: 20px;
  .leon-button{
    margin-right: 20px;
  }
}
</style>
